{% load pages_tags settings_tags %}

{% get_menu_items 'main_menu' as menu_items %}

<!--Navbar Start-->
<nav class="navbar navbar-expand-lg fixed-top navbar-kleo normal-nav">
    <div class="container">
        {% block branding %}
        <a href="{% url 'home' %}" class="navbar-brand logo d-flex justify-content-center p-0">
          {% settings 'SHOW_LOGO' as show_logo %}

          {% if show_logo %}
            <img src="{% dj_settings 'LOGO_URL' %}" alt="{% settings 'SITE_NAME' %}" class="brand-image elevation-3"
               style="opacity: .8; max-height: 40px">
          {% else %}
            <span class="brand-text font-weight-bold">{% settings "SITE_NAME" %}</span>
          {% endif %}
        </a>
        {% endblock %}

        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <i class="fas fa-bars"></i>
        </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav ml-auto navbar-center" id="mySidenav">
                {% for item in menu_items  %}
                    {% render_menu_item item before='<li class="nav-item">' after='</li>' link_class='nav-link' %}
                {% endfor %}
            </ul>
        </div>
    </div>
</nav>
<!-- Navbar End -->